<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<!-- Metas -->
		<title>curtains.js | Documentation</title>
	    <meta name="description" content="curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.">
	    <link rel="canonical" href="https://www.curtainsjs.com/documentation.html">

	    <!-- Facebook OG -->
	    <meta property="og:title" content="curtains.js | Documentation">
	    <meta property="og:type" content="website">
	    <meta property="og:description" content="curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.">
	    <meta property="og:url" content="https://www.curtainsjs.com/documentation.html">
	    <meta property="og:image" content="https://www.curtainsjs.com/images/curtains-js-logo.jpg">

	    <!-- Twitter card -->
	    <meta name="twitter:card" content="summary_large_image">
	    <meta name="twitter:site" content="@martinlaxenaire">
		<meta name="twitter:creator" content="@martinlaxenaire">
		<meta name="twitter:title" content="curtains.js | Documentation">
		<meta name="twitter:description" content="curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.">
		<meta name="twitter:image" content="https://www.curtainsjs.com/images/curtains-js-logo.jpg">

		<!-- Favicon -->
		<link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-touch-icon.png">
		<link rel="icon" type="image/png" sizes="32x32" href="images/favicons/favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="16x16" href="images/favicons/favicon-16x16.png">
		<link rel="manifest" href="images/favicons/site.webmanifest">
		<link rel="mask-icon" href="images/favicons/safari-pinned-tab.svg" color="#202340">
		<link rel="shortcut icon" href="images/favicons/favicon.ico">
		<meta name="msapplication-TileColor" content="#202340">
		<meta name="msapplication-config" content="images/favicons/browserconfig.xml">
		<meta name="theme-color" content="#202340">

		<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet">
		<link rel="stylesheet" href="style.css" type="text/css">
	</head>
	<body>
        <div id="page-wrap">

			<div id="canvas"></div>

			<div id="content">

				<header id="header">
					<div class="wrapper">
						<div id="header-wrapper" class="flex-wrapper">
							<div id="header-title">
								<a href="/" title="Home">curtains.js</a>
							</div>
							<nav id="main-menu">
								<ul class="flex-wrapper">
									<li>
										<a href="get-started.html">Get started</a>
									</li>
									<li>
										<a href="documentation.html" class="active">Docs</a>
									</li>
									<li>
										<a href="download.html">Download</a>
									</li>
								</ul>
							</nav>
						</div>
					</div>
				</header>

				<section class="content-section api-section">

                    <nav id="api-menu-nav">

                        <ul id="api-menu">
                            <li class="active">
                                <div class="api-top-menu-item">Core</div>
                                <ul class="api-submenu-content">
                                    <li>
                                        <a href="curtains-class.html">Curtains</a>
                                    </li>
                                    <li>
                                        <a href="plane-class.html">Plane</a>
                                    </li>
                                    <li>
                                        <a href="texture-class.html">Texture</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="active">
                                <div class="api-top-menu-item">Frame Buffer Objects</div>
                                <ul class="api-submenu-content">
                                    <li>
                                        <a href="render-target-class.html">RenderTarget</a>
                                    </li>
                                    <li>
                                        <a href="shader-pass-class.html">ShaderPass</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="active">
                                <div class="api-top-menu-item">Loaders</div>
                                <ul class="api-submenu-content">
                                    <li>
                                        <a href="texture-loader-class.html">TextureLoader</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="active">
                                <div class="api-top-menu-item">Math</div>
                                <ul class="api-submenu-content">
                                    <li>
                                        <a href="vec-2-class.html">Vec2</a>
                                    </li>
                                    <li>
                                        <a href="vec-3-class.html">Vec3</a>
                                    </li>
                                    <li>
                                        <a href="mat-4-class.html">Mat4</a>
                                    </li>
                                    <li>
                                        <a href="quat-class.html">Quat</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="active">
                                <div class="api-top-menu-item">Extras</div>
                                <ul class="api-submenu-content">
                                    <li>
                                        <a href="ping-pong-plane-class.html">PingPongPlane</a>
                                    </li>
                                    <li>
                                        <a href="fxaa-pass-class.html">FXAAPass</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </nav>

					<div id="api-content">

						<div class="api-content-inner">
							<div class="inner-section">
								<h1>Documentation</h1>

                                <h2>Basic concept</h2>

                                <p>
                                    Since the <strong>version 7.0</strong> the whole library has been rewritten and broken into multiple class modules to improve the readability and maintainability of the code. Since <strong>curtains.js is a high-level API library</strong>, most of those classes are used internally only. Even tho they are listed here you won't ever need to use them.
                                </p>

                                <p>
                                    If you're coming from a previous version of the library, have a look at the <a href="migration-guide-to-v7.html">migration guide</a>.
                                </p>

                                <h3 class="main-classes-directories">Core</h3>

                                <p>
                                    Main classes needed to create basic scenes.
                                </p>

                                <ul class="main-classes-list">
                                    <li>
                                        <h4>Curtains <span class="api-item-version">v1.0</span></h4>
                                        <p>
                                            The <a href="curtains-class.html">Curtains</a> class is responsible for the canvas and WebGL context and therefore creates a WebGL scene. It also creates a requestAnimationFrame loop and will draw every Plane elements that you've created.
                                        </p>
                                        <p class="api-item-examples">
                                            <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/core/Curtains.js" title="Curtains class source code" target="_blank">Source code</a>.
                                        </p>

                                        <ul class="internal-classes-list">
                                            <li>
                                                <h5>Renderer</h5>
                                                <p>
                                                    The Renderer class is handling everything related to the WebGL context (creation and restoration, extensions, WebGL commands, etc).
                                                </p>
                                                <p class="api-item-examples">
                                                    <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/core/Renderer.js" title="Renderer class source code" target="_blank">Source code</a>.
                                                </p>

                                                <ul class="internal-classes-list">
                                                    <li>
                                                        <h6>Scene</h6>
                                                        <p>
                                                            The Scene class is created by the Renderer. It manages the render order of every WebGL objects (planes, render targets and shader passes) added.<br />
                                                            Read more about <a href="scene-rendering-order.html">how the library draws the different objects</a>.
                                                        </p>
                                                        <p class="api-item-examples">
                                                            <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/core/Scene.js" title="Scene class source code" target="_blank">Source code</a>.
                                                        </p>
                                                    </li>
                                                    <li>
                                                        <h6>CacheManager</h6>
                                                        <p>
                                                            The CacheManager caches already compiled shaders, vertices and UVs arrays and images textures in order to reuse them whenever possible and avoid extra heavy computations.
                                                        </p>
                                                        <p class="api-item-examples">
                                                            <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/utils/CacheManager.js" title="CacheManager class source code" target="_blank">Source code</a>.
                                                        </p>
                                                    </li>
                                                    <li>
                                                        <h6>CallbackQueueManager</h6>
                                                        <p>
                                                            The CallbackQueueManager is used to execute callbacks on the next animation frame call.
                                                        </p>
                                                        <p class="api-item-examples">
                                                            <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/utils/CallbackQueueManager.js" title="CallbackQueueManager class source code" target="_blank">Source code</a>.
                                                        </p>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <h5>ScrollManager</h5>
                                                <p>
                                                    The ScrollManager class adds a scroll event listener if needed and handles the update of the scroll values.
                                                </p>
                                                <p class="api-item-examples">
                                                    <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/utils/ScrollManager.js" title="ScrollManager class source code" target="_blank">Source code</a>.
                                                </p>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <h4>Plane <span class="api-item-version">v1.0</span></h4>
                                        <p>
                                            The <a href="plane-class.html">Plane</a> class creates a WebGL plane that is bound to a HTML element and that will be rendered at the sizes and positions of this HTML element.<br />
                                        </p>
                                        <p>
                                            It <strong>extends</strong> the DOMMesh class.
                                        </p>
                                        <p class="api-item-examples">
                                            <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/core/Plane.js" title="Plane class source code" target="_blank">Source code</a>.
                                        </p>
                                        <ul class="internal-classes-list">
                                            <li>
                                                <h5>DOMMesh</h5>
                                                <p>
                                                    The DOMMesh class <strong>extends</strong> the Mesh class by adding a few helper methods that relies on the associated HTML element used to create the Mesh.
                                                </p>
                                                <p class="api-item-examples">
                                                    <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/core/DOMMesh.js" title="DOMMesh class source code" target="_blank">Source code</a>.
                                                </p>
                                                <ul class="internal-classes-list">
                                                    <li>
                                                        <h6>Mesh</h6>
                                                        <p>
                                                            The Mesh class creates a WebGL mesh, i.e. creates a Geometry, a Program, the Mesh's uniforms and handles Textures creation.
                                                        </p>
                                                        <p class="api-item-examples">
                                                            <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/core/Mesh.js" title="Mesh class source code" target="_blank">Source code</a>.
                                                        </p>
                                                        <ul class="internal-classes-list">
                                                            <li>
                                                                <h6>Geometry</h6>
                                                                <p>
                                                                    The Geometry class creates and binds the vertices and texture coordinates attributes buffers and draw the mesh.
                                                                </p>
                                                                <p class="api-item-examples">
                                                                    <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/core/Geometry.js" title="Geometry class source code" target="_blank">Source code</a>.
                                                                </p>
                                                            </li>
                                                            <li>
                                                                <h6>Program</h6>
                                                                <p>
                                                                    The Program class compiles the shaders and creates a WebGL program used by the Mesh.
                                                                </p>
                                                                <p class="api-item-examples">
                                                                    <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/core/Program.js" title="Program class source code" target="_blank">Source code</a>.
                                                                </p>
                                                            </li>
                                                            <li>
                                                                <h6>Uniforms</h6>
                                                                <p>
                                                                    The Uniforms class creates and updates the Mesh's uniforms.
                                                                </p>
                                                                <p class="api-item-examples">
                                                                    <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/core/Uniforms.js" title="Uniforms class source code" target="_blank">Source code</a>.
                                                                </p>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <h5>Camera</h5>
                                                <p>
                                                    The Camera class creates a perspective camera used to compute the plane's projection matrix.
                                                </p>
                                                <p class="api-item-examples">
                                                    <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/camera/Camera.js" title="Camera class source code" target="_blank">Source code</a>.
                                                </p>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <h4>Texture <span class="api-item-version">v2.0</span></h4>
                                        <p>
                                            The <a href="texture-class.html">Texture</a> class is used to create WebGL textures.
                                        </p>
                                    </li>
                                </ul>

                                <h3 class="main-classes-directories">Frame Buffer Objects</h3>

                                <p>
                                    Those classes are generally used to add post-processing effects to your planes.
                                </p>

                                <ul class="main-classes-list">
                                    <li>
                                        <h4>RenderTarget <span class="api-item-version">v5.0</span></h4>
                                        <p>
                                            The <a href="render-target-class.html">RenderTarget</a> class is a Frame Buffer Object used internally to create shader passes. It allows you to render one or multiple planes as a texture that you can then use in another plane or shader pass.
                                        </p>
                                        <p class="api-item-examples">
                                            <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/framebuffers/RenderTarget.js" title="RenderTarget class source code" target="_blank">Source code</a>.
                                        </p>
                                    </li>
                                    <li>
                                        <h4>ShaderPass <span class="api-item-version">v3.0</span></h4>
                                        <p>
                                            The <a href="shader-pass-class.html">ShaderPass</a> class <strong>extends</strong> the DOMMesh class.<br />
                                            ShaderPass elements are used to add post-processing effects. Think of it as an additional plane that will be bound to your WebGL canvas container. This way you will be able to apply shaders to a bunch of planes or to your whole WebGL scene.<br />
                                            You can add multiple shader passes and they will be applied one after the other in their creation order.
                                        </p>
                                        <p class="api-item-examples">
                                            <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/framebuffers/ShaderPass.js" title="ShaderPass class source code" target="_blank">Source code</a>.
                                        </p>
                                    </li>
                                </ul>

                                <h3 class="main-classes-directories">Loaders</h3>

                                <p>Useful to create WebGL textures based on HTML media elements</p>

                                <ul class="main-classes-list">
                                    <li>
                                        <h4>TextureLoader <span class="api-item-version">v7.0</span></h4>
                                        <p>
                                            The <a href="texture-loader-class.html">TextureLoader</a> class loads images, videos and canvases and creates Textures using those HTML elements as sources.
                                        </p>
                                        <p class="api-item-examples">
                                            <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/loaders/TextureLoader.js" title="TextureLoader class source code" target="_blank">Source code</a>.
                                        </p>

                                        <ul class="internal-classes-list">
                                            <li>
                                                <h5>PlaneTextureLoader</h5>
                                                <p>
                                                    The PlaneTextureLoader class <strong>extends</strong> the TextureLoader class. Used internally by planes and shader passes to load medias, use the resulting textures and fire the onLoading and onReady callbacks.
                                                </p>
                                                <p class="api-item-examples">
                                                    <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/loaders/PlaneTextureLoader.js" title="PlaneTextureLoader class source code" target="_blank">Source code</a>.
                                                </p>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>


                                <h3 class="main-classes-directories">Math</h3>

                                <p>
                                    Math classes used for 3D vectors and matrices calculations. Highly based on <a href="https://github.com/mrdoob/three.js">three.js</a> and <a href="http://glmatrix.net/docs/">glMatrix</a> maths classes.<br />
                                    Note that at the moment those classes are still not complete and implement only the methods needed internally by the library.
                                </p>

                                <ul class="main-classes-list">
                                    <li>
                                        <h4>Vec2 <span class="api-item-version">v7.0</span></h4>
                                        <p>
                                            The <a href="vec-2-class.html">Vec2</a> class handles 2 dimensions vectors calculations.
                                        </p>
                                        <p class="api-item-examples">
                                            <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/math/Vec2.js" title="Vec2 class source code" target="_blank">Source code</a>.
                                        </p>
                                    </li>
                                    <li>
                                        <h4>Vec3 <span class="api-item-version">v7.0</span></h4>
                                        <p>
                                            The <a href="vec-3-class.html">Vec3</a> class handles 3 dimensions vectors calculations.
                                        </p>
                                        <p class="api-item-examples">
                                            <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/math/Vec3.js" title="Vec3 class source code" target="_blank">Source code</a>.
                                        </p>
                                    </li>
                                    <li>
                                        <h4>Mat4 <span class="api-item-version">v7.0</span></h4>
                                        <p>
                                            The <a href="mat-4-class.html">Mat4</a> class handles 4 dimensions matrices calculations.
                                        </p>
                                        <p class="api-item-examples">
                                            <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/math/Mat4.js" title="Mat4 class source code" target="_blank">Source code</a>.
                                        </p>
                                    </li>
                                    <li>
                                        <h4>Quat <span class="api-item-version">v7.0</span></h4>
                                        <p>
                                            The <a href="quat-class.html">Quat</a> class handles quaternions calculations.
                                        </p>
                                        <p class="api-item-examples">
                                            <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/math/Quat.js" title="Quat class source code" target="_blank">Source code</a>.
                                        </p>
                                    </li>
                                </ul>


                                <h3 class="main-classes-directories">Extras</h3>

                                <p>Extra classes are often used additional classes built using the other classes above that can help you save some time.</p>

                                <ul class="main-classes-list">
                                    <li>
                                        <h4>PingPongPlane <span class="api-item-version">v7.0</span></h4>
                                        <p>
                                            The <a href="ping-pong-plane-class.html">PingPongPlane</a> class <strong>extends</strong> the Plane class by adding 2 read and write render targets that will be swapped during render and a method to get the resulting texture. Allows fluid effects, flowmaps, etc.
                                        </p>
                                        <p class="api-item-examples">
                                            <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/extras/PingPongPlane.js" title="PingPongPlane class source code" target="_blank">Source code</a>.
                                        </p>
                                    </li>
                                    <li>
                                        <h4>FXAAPass <span class="api-item-version">v7.0</span><span class="api-item-version api-item-warning">updated in v8.0</span></h4>
                                        <p>
                                            The <a href="fxaa-pass-class.html">FXAAPass</a> class <strong>extends</strong> the ShaderPass class by creating a Fast Approximate Anti-Aliasing pass. If you're using render targets or shader passes in your code, just use this pass as the last pass to add an anti-aliasing effect.
                                        </p>
                                        <p class="api-item-examples">
                                            <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/extras/FXAAPass.js" title="FXAAPass class source code" target="_blank">Source code</a>.
                                        </p>
                                    </li>
                                </ul>


								<h2>Additional ressources</h2>

								<ol>
                                    <li>
                                        <a href="https://github.com/martinlaxenaire/curtainsjs" title="curtains.js on Github" target="_blank">Github</a>
                                    </li>
									<li>
										<a href="https://css-tricks.com/animate-images-and-videos-with-curtains-js/" target="_blank" title="CSS Tricks tutorial">CSS Tricks tutorial</a>
									</li>
                                    <li>
                                        <a href="https://tympanus.net/codrops/2020/10/07/webgl-video-transitions-with-curtains-js/" target="_blank" title="WebGL Video Transitions with Curtains.js">Codrops WebGL Video Transitions with Curtains.js</a>
                                    </li>
                                    <li>
                                        <a href="https://css-tricks.com/creating-webgl-effects-with-curtainsjs/" target="_blank" title="Creating WebGL Effects with CurtainsJS on CSS Tricks">Creating WebGL Effects with CurtainsJS on CSS Tricks</a>
                                    </li>
                                    <li>
                                        WebGL drag slider complete step-by-step tutorial on CodePen: <a href="https://codepen.io/martinlaxenaire/post/webgl-enhanced-drag-slider-tutorial-with-curtains-js-part-1" target="_blank" title="WebGL drag slider complete step-by-step tutorial on CodePen, part 1: creating the slider">part 1: creating the slider</a>, <a href="https://codepen.io/martinlaxenaire/post/webgl-enhanced-drag-slider-tutorial-with-curtains-js-part-2" target="_blank" title="WebGL drag slider complete step-by-step tutorial on CodePen, part 2: adding the WebGL">part 2: adding the WebGL</a>, <a href="https://codepen.io/martinlaxenaire/post/webgl-enhanced-drag-slider-tutorial-with-curtains-js-part-3" target="_blank" title="WebGL drag slider complete step-by-step tutorial on CodePen, part 3: improving performance">part 3: improving performance</a>
                                    </li>
									<li>
										<a href="https://codepen.io/collection/XEvPge/" target="_blank" title="CodePen curtains.js collection">CodePen curtains.js collection</a>
									</li>
								</ol>

							</div>
						</div>
					</div>

				</section>
			</div>
		</div>

		<!-- Global site tag (gtag.js) - Google Analytics -->
		<script async src="https://www.googletagmanager.com/gtag/js?id=UA-141413267-1"></script>
		<script>
		  	window.dataLayer = window.dataLayer || [];
		  	function gtag(){dataLayer.push(arguments);}
		  	gtag('js', new Date());

		  	gtag('config', 'UA-141413267-1');
		</script>

	</body>
</html>
